<script setup lang="ts">

import SearchHistory from "@/components/Screen/SearchHistory.vue"
import { ref, watch, onMounted, watchEffect } from 'vue'
import { searchService } from "@/apis/search"
import { useSearchHistoryStore,useRecentlyStore,useMyLikeListStore,useAudioPlayerStore} from '@/stores/'
import SearchView from '@/components/Screen/SearchView.vue'
import { strInStr } from "@/utils/stringUtils"

const search = useSearchHistoryStore()
const recentlyStore = useRecentlyStore()
const myLikeStore = useMyLikeListStore()
const audioPlayer = useAudioPlayerStore()
const searchRef = ref<HTMLInputElement | null>(null)

const SearchBoxDisplay = ref(false)

const showSearchBox = (value:boolean) => {
  console.log("show:" ,value)
  SearchBoxDisplay.value = value
}

const closeSearchBox = ()=>{
  if(searchRef.value)
  {

    searchRef.value.blur()
  }
}

const handleSearch = (key:string) => {
  searchWord.value = key
  closeSearchBox()
}

const onSearchInput = ()=>{

  if(searchWord.value !== ""){
    const res = searchService({q: searchWord.value})
    console.log(res)
    search.addSearchWord({name: searchWord.value})
  }

}

const searchWord = ref<string>('')

const Result = ref<searchResult>({
  albums:[],
  artists:[],
  songs:[]
})

const localSearchResult = ref<LocalSongSearchResult>({
  myLike: [],
  recently: [],
  queue: []
})

const LocalSearch = () => {
  localSearchResult.value.recently = recentlyStore.list.filter(item => strInStr(item.title,searchWord.value))
  localSearchResult.value.myLike = myLikeStore.list.filter(item => strInStr(item.title,searchWord.value))
  localSearchResult.value.queue = audioPlayer.songList.filter(item => strInStr(item.title,searchWord.value))
}


watchEffect(async()=>{
  if(searchWord.value !== ""){
    LocalSearch()
    const res = await searchService({q: searchWord.value})
    if(res.data as searchResult)
    {
      Result.value.albums = res.data.albums
      Result.value.artists = res.data.artists
      Result.value.songs = res.data.songs
    }

  }
})

</script>

<template>
  <label>
    <div class="searchArea" >
      <input v-model="searchWord"
             type="text"
             ref="searchRef"
             placeholder="搜索音乐"
             @focus="showSearchBox(true)"
             @blur="showSearchBox(false)"
             @change="onSearchInput" />
      <SearchHistory v-if="SearchBoxDisplay && searchWord == ''"
                     class="his-box"
                     @mousedown.prevent
                     @update:search="handleSearch"
                     :close="closeSearchBox"

      ></SearchHistory>
      <SearchView v-else-if="SearchBoxDisplay && searchWord !== ''"
                  class="his-box"
                  @mousedown.prevent
                  :OnlineSearchResult="Result"
                  :LocalSearchResult="localSearchResult"
                  :searchKey="searchWord"
                  @update:search="handleSearch"
                  :close="closeSearchBox"
      ></SearchView>
    </div>
  </label>

</template>

<style lang="scss" scoped>
.searchArea{
  position: relative;
  min-width: 164px;
  height: 31px;
  background-color: #e3e3e3;
  border-radius: 15px;
  padding: 0 14px 0 14px;
  margin-right: 20px;
  input{
    height: 100%;
    border: none;
    outline: none;
    background: transparent;

  }

  .his-box{
    //padding-left: 0;
    position: absolute;
    top: 34px;
    left: 0;
    user-select: none;
  }
}
</style>